<template>
  <div>
    <div class="fullScreen" @click="ClickChange();a()"
      ><img :src="imgUrl" alt=""
    /></div>
  </div>
</template>

<script>

export default {
  name: "FullScreen",
  data() {
    return {
      exitFullscreen:false,
      imgUrl: require("@/assets/icon/Fullscreen.png"),
      imgUrl1: require("@/assets/icon/Fullscreen.png"),
      imgUrl2: require("@/assets/icon/rescreen.png"),
  }
 
},
 methods:{
  ClickChange() {
   if(this.imgUrl==this.imgUrl1){
     this.imgUrl=this.imgUrl2
   }else{
     this.imgUrl=this.imgUrl1
   }
  },
  handleFullScreen() {
        var element = document.documentElement;
        if (this.fullscreen) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        } else {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                // IE11
                element.msRequestFullscreen();
            }
        }

    },

    exitFullscreena() {
        if (document.exitFullscreena) {
            document.exitFullscreena();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    },

  a(){
    if(!this.exitFullscreen){
      // console.log('1111')
      this.handleFullScreen()
      this.exitFullscreen=true
    }else{
      // console.log('2222')
      this.exitFullscreena()
      this.exitFullscreen=false
    }
  }

  },

}
  
  
</script>

<style lang="less">

.fullScreen {
  position: absolute;
  right: 170px;
  top:18px;
  img {
    width: 24px;
    height: 24px;
  }
}
</style>

